﻿@model IEnumerable<CodeBox.FB.ViewModels.TeamViewModel>
@{
    ViewBag.Title = "Index";
}
<script type="text/javascript">

    $(document).ready(function () {

        $("#selectable").selectable();

        $("#dialog:ui-dialog").dialog("destroy");
        $("#dialog-modal").dialog({
            autoOpen: false,
            height: 140,
            modal: true
        });

        // select only one li
        $(".clickTeam").click(function (event) {


            //shows dialog

        });

        $(".clickTeam").hover(function (event) {
            $(this).siblings().removeClass("selected");
            $(this).addClass("selected");
            var teamName = $(this).attr("id");

            $.ajax({
                url: 'Team/TeamInfo/' + teamName,
                type: "POST",
                success: function (data) {
                    showTeamInfo(data);
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    // alert(xhr.status);
                    alert(thrownError);
                },
                complete: function () {
                    //alert('complete');
                }
            });
        });
    });



    function showTeamInfo(data) {
        var html = "<a href='/team/" + data.TeamName + "'>" + data.TeamName + "</a>";
        html += "<br />Matches" + data.Matches;
        html += "<br />Points" + data.Points;
        html += "<br />Won" + data.Won;
        html += "<br />Lost" + data.Lost;
        html += "<br />Tied" + data.Tied;
        html += "<br />NoResult" + data.NoResult;
        html += "<br />Average" + data.Average;
        $('#teamDetails').html(html);
        $("#dialog-modal").dialog('open');
    }
    
</script>
<h2>
    Index</h2>
<p>
    @Html.ActionLink("Create New", "Create")
</p>
<div id="divTeams" class="ui-widget">
    <ul id="selectable">
        @foreach (var item in Model)
        {
        
            <li class="clickTeam ui-state-default" id="@item.TeamName" >
                <img src="" alt="" style="height: 20%; width: 20%" />
                <br />
                <a href="#">@item.TeamName </a></li>                
@*<tr>
        <td>
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.ImageUrl)
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id = item.ID }) |
            @Html.ActionLink("Details", "Details", new { id = item.ID }) |
            @Html.ActionLink("Delete", "Delete", new { id = item.ID })
        </td>
    </tr>*@
    
        }
    </ul>
</div>
<div id="dialog-modal" title="Basic modal dialog" class=">
    <div id="teamDetails">
    </div>
</div>
